<script setup lang="ts">
import { ref } from 'vue'

const isDev = import.meta.env.DEV
const src = ref(
  isDev
    ? `http://localhost:5173/dashboard/#/?who=sysinteg&t=${Date.now()}`
    : `${location.origin}/dashboard/#/?who=sysinteg&t=${Date.now()}`,
)
</script>

<template>
  <div class="dashboard-wrapper h-full w-full overflow-auto">
    <div class="energy-dashboard dashboard relative h-full min-h-900px min-w-1600px w-full">
      <div class="h-full w-full overflow-hidden">
        <iframe :src="src" allowfullscreen class="h-full w-full" frameborder="0" />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.dashboard-wrapper {
  scrollbar-width: thin;
  .dashboard {
    background-color: rgb(6, 19, 42);
    background-image: url('~/assets/images/bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

    .block-body {
      background: rgba(31, 82, 145, 0.1);
    }
    .text-xs {
      @apply text-xs;
    }
    .text-sm {
      @apply text-sm;
    }
    .text-md {
      @apply text-md;
    }
    .text-lg {
      @apply text-lg;
    }
    .text-xl {
      @apply text-xl;
    }
    .text-2xl {
      @apply text-2xl;
    }
  }
}
.energy-dashboard {
  --animate-delay: 0.2s;
}
</style>
